<template>
  <div class="app-container teacher-form-container">
    <el-card shadow="hover" class="teacher-form-card">
      <div class="form-title" style="color: #66b1ff;">添加讲师</div>

      <el-form :model="teacher" label-width="100px" class="teacher-form">

        <el-form-item label="讲师名称">
          <el-input v-model="teacher.name" placeholder="请输入讲师名称" />
        </el-form-item>

        <el-form-item label="讲师头衔">
          <el-select v-model="teacher.level" clearable placeholder="请选择讲师头衔">
            <el-option :value="1" label="高级讲师" />
            <el-option :value="2" label="首席讲师" />
          </el-select>
        </el-form-item>

        <el-form-item label="讲师资历">
          <el-input v-model="teacher.career" placeholder="请输入讲师资历" />
        </el-form-item>

        <el-form-item label="讲师简介">
          <el-input
            v-model="teacher.intro"
            type="textarea"
            :rows="6"
            placeholder="请输入讲师简介"
          />
        </el-form-item>

        <el-form-item label="讲师头像">
          <div class="avatar-wrapper" @click="imagecropperShow = true">
            <div v-if="teacher.avatar" class="avatar-image" :style="{ backgroundImage: 'url(' + teacher.avatar + ')' }"></div>
            <div v-else class="avatar-placeholder">
              <i class="el-icon-plus avatar-icon"></i>
            </div>
          </div>

          <image-cropper
            v-show="imagecropperShow"
            :key="imagecropperKey"
            :url="BASE_API + 'admin/oss/upload'"
            field="file"
            :width="200"
            :height="200"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :disabled="saveBtnDisabled"
            @click="saveOrUpdate"
          >
            保存
          </el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher'
import ImageCropper from '@/components/ImageCropper'

export default {
  components: { ImageCropper },
  data() {
    return {
      teacher: {
        name: '',
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      BASE_API: process.env.VUE_APP_BASE_API,
      saveBtnDisabled: false
    }
  },
  created() {
    this.init()
  },
  watch: {
    $route() {
      this.init()
    }
  },
  methods: {
    close() {
      this.imagecropperShow = false
      this.imagecropperKey += 1
    },
    cropSuccess(data) {
      this.imagecropperShow = false
      this.teacher.avatar = data
      this.imagecropperKey += 1
    },
    init() {
      const id = this.$route.params?.id
      if (id) {
        this.getInfo(id)
      } else {
        this.teacher = {}
      }
    },
    getInfo(id) {
      teacher.getById(id).then(response => {
        this.teacher = response.data
      })
    },
    saveOrUpdate() {
      this.saveBtnDisabled = true
      if (!this.teacher.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    saveData() {
      teacher.save(this.teacher)
        .then(() => {
          this.$message.success('保存成功!')
          this.$router.push({ path: '/teacher/table' })
        })
        .catch(() => {
          this.$message.error('保存失败')
        })
    },
    updateData() {
      teacher.updateTeacher(this.teacher)
        .then(() => {
          this.$message.success('修改成功!')
          this.$router.push({ path: '/teacher/table' })
        })
        .catch(() => {
          this.$message.error('修改失败')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.teacher-form-container {
  display: flex;
  justify-content: center;
  padding: 40px;
  background-color: #f5f7fa;
}

.teacher-form-card {
  width: 800px;
  padding: 40px;
  border-radius: 14px;
}

.form-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

.teacher-form ::v-deep .el-form-item {
  margin-bottom: 28px;
}

.avatar-wrapper {
  width: 120px;
  height: 120px;
  border: 2px dashed #dcdfe6;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}

.avatar-wrapper:hover {
  border-color: #409EFF;
}

.avatar-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.avatar-icon {
  font-size: 28px;
  color: #c0c4cc;
}
</style>
